<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select class="province">
    <option value="">请选择省份</option>
    <!-- <option value="A001">北京</option>
    <option value="A002">上海</option>
    <option value="A003">湖北</option>
    <option value="A004">湖南</option> -->
  </select>
  <select class="city" name="" id="">
    <option value="">请选择市/区</option>
    <!-- <option value="A001">朝阳</option>
    <option value="A002">海淀</option>
    <option value="A003">沙河</option>
    <option value="A004">上地</option> -->
  </select>
  <select class="county" name="" id="">
    <option value="">请选择县/区</option>
    <!-- <option value="A001">朝阳</option>
    <option value="A002">海淀</option>
    <option value="A003">沙河</option>
    <option value="A004">上地</option> -->
  </select>

</body>
<script>
  // 1. 页面加载时 根据数据生成省份
  // 2. 省份切换时, 通过当前省份id找到对应的省份数据 =>
  //  得到该省下市区集合 => 动态生成市区
  // 3. select的html 结构 也是用 innerHTML    
  //    value 用于获取被选中的option的值

  var province = document.getElementsByClassName('province')[0];
  var city = document.getElementsByClassName('city')[0];
  var county = document.getElementsByClassName('county')[0];


  var xhr = new XMLHttpRequest();
  xhr.open("get", "../date/proData.json", true);
  xhr.send();
  xhr.onreadystatechange = function () {

    console.log("请求状态改变:", xhr.readyState, xhr.status);
    var html = '<option value="">请选择省份</option>';
    if (xhr.readyState == 4 && xhr.status == 200) {
      // console.log(xhr.responseText);
      var result = xhr.responseText;
      var date = JSON.parse(result);
      var { list: proList } = date;
      // console.log(proList);

      proList.forEach(item => {
        // console.log(item);
        // city_id: "CH01", name: "北京", en: "", list: Array(15)
        var { city_id, name, en } = item;
        // console.log(item.list);

        html += `<option value="${city_id}">${name}</option>`;

      });
      province.innerHTML = html;

      province.onchange = function () {
        var cityId = this.value;
        console.log(cityId);
        if (cityId) {
          // for (var i = 0; i < proList.list; i++) {
          //   var item = proList[i];
          //   // console.log(item);
          //   if (item.city_id === cityId) {
          //     console.log(item);
          //   }
          // }


          // filter()  把满足条件的元素筛选出来放到数组中  [{}]
          // var thisPro = proList.filter(function(item){
          //     var {city_id} = item;
          //     return city_id === cityId; 
          // })[0];  // [{}][0]
          // console.log(thisPro);

          // find()  从数组中找到第一个满足条件的元素
          var thisPro = proList.find(function (item) {
            var { city_id } = item;
            return city_id === cityId;
          })
          console.log(thisPro);

          var { list: cityList } = thisPro;
          console.log(cityList);

          var html = ` <option value="">请选择市/区</option>`;
          cityList.forEach(({ city_id, name }) => {

            html += `<option value="${city_id}">${name}</option>`;


          })
          city.innerHTML = html;


          city.onchange = function () {
            var countyId = this.value;
            console.log(countyId);

            if (countyId) {
              var thisCt = cityList.find(function (item) {
                var { city_id } = item;
                console.log(item);
                return city_id === countyId;
              })
              // console.log(thisCt);
              var { list: countylist } = thisCt;
              console.log(countylist);

              var html = ` <option value="">请选择市/区</option>`;
              countylist.forEach(({ city_id, name }) => {
                html += `<option value="${city_id}">${name}</option>`;

              })
              county.innerHTML = html;

            }

          }

        } else { //如果未选择  省/直辖市/自治区
          citySel.innerHTML = '<option value="">请选择市/区</option>';
        }
      }





    }

  }
</script>

</html>